<template>
    <div class="container">
        <div class="login-box">
            <div class="login-content">
                <div class="system-title">超 市 管 理 系 统</div>
                <el-form :model="loginForm" ref="loginForm">
                    <el-form-item prop="username">
                        <el-row>
                            <el-col :span="2" class="icon-col">
                                <i class="iconfont icon-r-user1 input-icon"></i>
                            </el-col>
                            <el-col :span="22" class="input-col">
                                <el-input v-model="loginForm.username" placeholder="账号"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-row>
                            <el-col :span="2" class="icon-col">
                                <i class="iconfont icon-r-lock input-icon"></i>
                            </el-col>
                            <el-col :span="22" class="input-col">
                                <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
                                <div class="helper-text">
                                    <span class="link-text" @click="showRegisterDialog">请求注册</span>
                                    <span class="link-text" @click="showForgetDialog">忘记密码</span>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item class="button-item">
                        <el-button class="login-button" type="primary" @click="submitForm('loginForm')">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 请求注册弹窗 -->
        <el-dialog title="请求注册" :visible.sync="registerDialogVisible" width="30%" center>
            <span>请联系管理员进行账号注册!</span>
            <p>联系方式：18716368038</p>
            <span slot="footer" class="dialog-footer">
                <el-button type="warning" @click="registerDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 忘记密码弹窗 -->
        <el-dialog title="忘记密码" :visible.sync="forgetDialogVisible" width="30%" center>
            <span>请联系管理员重置密码</span>
            <p>联系方式：18716368038</p>
            <span slot="footer" class="dialog-footer">
                <el-button type="warning" @click="forgetDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { ajaxPost, popup } from "@/assets/js/common";
import Cookies from "js-cookie";

export default {
    data() {
        return {
            loginForm: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "账号不能为空",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur",
                    },
                    {
                        min: 6,
                        max: 8,
                        message: "密码长度为5-8位",
                        trigger: "blur",
                    },
                ],
            },
            registerDialogVisible: false,
            forgetDialogVisible: false,
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    ajaxPost("/login", this.loginForm).then((res) => {
                        res = res.data;
                        if (res.code == 200) {
                            Cookies.set("token", res.data.token, {
                                expires: 1 / 48,
                            });
                            Cookies.set(
                                "employee",
                                JSON.stringify(res.data.employee),
                                { expires: 1 / 48 }
                            );
                            popup("登录成功，请稍等...");
                            this.$router.push("/index");
                        } else {
                            popup(res.msg, "warning");
                        }
                    });
                } else {
                    popup("账号或密码格式不正确！", "error");
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        showRegisterDialog() {
            this.registerDialogVisible = true;
        },
        showForgetDialog() {
            this.forgetDialogVisible = true;
        },
    },
};
</script>

<style>
.container {
    height: 100vh;
    overflow: hidden;
    background-image: url("../assets/img/01.jpg");
    background-size: 100% 110%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.login-box {
    width: 40%;
    display: flex;
    background-color: rgba(255, 255, 255, 0.9);
}

.login-content {
    flex: 1;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.system-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
    color: #0481de;
    font-weight: bold;
}

.icon-col {
    text-align: right;
}

.input-col {
    text-align: left;
    padding-left: 10px;
}

.input-icon {
    font-size: 26px;
    color: grey;
}

.helper-text {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding: 0;
    margin-left: -42px;
}

.link-text {
    color: #4a99ff;
    font-size: 12px;
    cursor: pointer;
}

.login-button {
    font-size: 18px;
    width: 100%;
}

#login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: hidden;
    height: 100%;
    background: url("../assets/img/01.jpg") center top / cover no-repeat;
}

.loginForm {
    background-color: rgb(255, 255, 255);
    width: 400px;
    height: 280px;
    margin: 150px auto;
    text-align: center;
    padding-top: 10px;
    border-color: #ffffff;
    border-style: solid;
    border-radius: 15px;
    opacity: 0.9;
}

.loginForm input {
    width: 260px;
}

h3 {
    margin: 10px 0;
}

.loginForm button {
    margin-right: 40px;
}

.el-form-item {
    margin-bottom: 20px;
}

.button-item {
    margin-top: 10px;
    margin-bottom: 0;
}

/* 弹窗样式调整 */
.el-dialog {
    border-radius: 5px;
    margin-top: 0 !important;
    /* 移除顶部边距 */
    position: absolute !important;
    /* 使用绝对定位 */
    top: 50% !important;
    /* 垂直居中 */
    left: 50% !important;
    /* 水平居中 */
    transform: translate(-50%, -50%) !important;
    /* 完全居中 */
}

.el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.el-dialog__body {
    padding: 30px 20px;
    text-align: center;
    font-size: 16px;
    color: #606266;
}

.el-dialog__footer {
    padding: 15px 20px 20px;
    text-align: center;
    /* 将按钮居中显示 */
}

.dialog-footer .el-button {
    width: 100px;
    /* 设置按钮宽度 */
}

/* 弹窗遮罩层样式调整 */
.el-dialog__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .el-dialog {
        width: 90% !important;
        /* 在小屏幕上调整弹窗宽度 */
    }
}
</style>
